<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en" class="no-js">

    <head>

        <meta charset="utf-8">
        <title>&nbsp;找知聊&nbsp;</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
  		<link rel="shortcut icon" href="<%=path%>/favicon.ico" type="image/x-icon" />
       
        <!-- CSS -->
        <link rel="stylesheet" href="<%=path%>/page/front/login/assets/css/reset.css">
        <link rel="stylesheet" href="<%=path%>/page/front/login/assets/css/supersized.css">
        <link rel="stylesheet" href="<%=path%>/page/front/login/assets/css/style.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <link rel="stylesheet" type="text/css" href="<%=path%>/page/front/login/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="<%=path%>/page/front/login/css/demo.css" />
        <link rel="stylesheet" type="text/css" href="<%=path%>/page/front/login/css/icons.css" />
        <link rel="stylesheet" type="text/css" href="<%=path%>/page/front/login/css/component.css" />

        <script src="<%=path%>/page/front/login/js/modernizr.custom.js"></script>
        <script type="text/javascript" src="<%=path%>/page/front/login/js/jquery-1.8.3.min.js"></script>
        <link rel="Stylesheet" type="text/css" href="<%=path%>/page/front/login/style/loginDialog.css" />
        <style type="text/css">
        .mainztf{
            height: 80%;
            width: 70%;
           
            margin:0px auto;
        }
        .bottom{
            height:2%;
            width: 30%;
            margin:7% auto;
        }
        </style>
    </head>

    <body onkeydown="BindEnter(event)">
   		<div id="RegisterBox">
   			<div class="row1">
	                                    注册<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
	        </div>
	        <div class="row">
	           	 账&nbsp;&nbsp;&nbsp;&nbsp;号: <span class="inputBox">
	            <input type="text" id="txtName1" class="account" placeholder="账号" />
	            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
	        </div>
	        <div class="row">
	           	 邮&nbsp;&nbsp;&nbsp;&nbsp;箱: <span class="inputBox">
	            <input type="text" id="txtName1" class="email" placeholder="邮箱" />
	            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
	        </div>
	        <div class="row">
	           	 密&nbsp;&nbsp;&nbsp;&nbsp;码: <span class="inputBox">
	            <input type="password" id="txtPwd1" class="password" placeholder="密码" />
	            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
	        </div>
	        <div class="row">
	           	重复密码: <span class="inputBox">
	            <input type="password" id="txtPwd2" class="password1" placeholder="密码" />
	            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
	        </div>
	        <div class="row">
	            <a  onclick="check();" href="#" id="loginbtn" >注册</a>
	        </div>
   		</div>
        <div id="LoginBox">
	        <div class="row1">
	                                    登录<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
	        </div>
	        <div class="row">
	           	 用户名: <span class="inputBox">
	            <input type="text" id="txtName" placeholder="账号/邮箱" />
	            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
	        </div>
	        <div class="row">
	           	 密&nbsp;&nbsp;&nbsp;&nbsp;码: <span class="inputBox">
	            <input type="password" id="txtPwd" placeholder="密码" />
	            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
	        </div>
	        <div class="row">
	            <a  onclick="login();" href="#" id="loginbtn1">登录</a>
	        </div>
	    </div>
        <div id="st-container" class="st-container">        
            <!-- content push wrapper -->
            <div class="st-pusher">
                <!--    
                    example menus 
                    these menus will be under the push wrapper
                -->
                <nav class="st-menu st-effect-3" id="menu-3">
                    <h2 >OUR CLASS</h2>
                    <ul>
                        <li><a href="#" id="example"> 登录 </a></li>
                        <li><a href="#" id="example2"> 注册 </a></li>
                        <li><a href="../index/index.html"> 游客入口 </a></li>
                    </ul>
                </nav>
                <div class="mainztf"><br><br>
                                <br><br><br>
                                <h1> 找&nbsp;&nbsp;知&nbsp;&nbsp;聊 <br/>
                                <br/><small><small>找点知识，我们一起聊聊吧！</small></small></h1>
                                <br>
                                <button onclick="comeon();"> 游客入口 </button>  
                                <br><br>
                                <div id="st-trigger-effects" >                                
                                    <button data-effect="st-effect-3"> 登录 </button>                                
                                </div>
                            
                </div>           
                <div class="bottom">ahdfjlaljasd asdhasi u @21354 dffhlkahfihua</div>            
                    
            </div><!-- /st-pusher -->
        </div><!-- /st-container -->
		<script type="text/javascript">
		    $(function ($) {
		        //弹出登录
		        $("#example").hover(function () {
		            $(this).stop().animate({
		                opacity: '1'
		            }, 600);
		        }, function () {
		            $(this).stop().animate({
		                opacity: '0.6'
		            }, 1000);
		        }).on('click', function () {
		            $("body").append("<div id='mask'></div>");
		            $("#mask").addClass("mask").fadeIn("slow");
		            $("#LoginBox").fadeIn("slow");

		        });
		        //
		         //弹出登录
		        $("#example2").hover(function () {
		            $(this).stop().animate({
		                opacity: '1'
		            }, 600);
		        }, function () {
		            $(this).stop().animate({
		                opacity: '0.6'
		            }, 1000);
		        }).on('click', function () {
		            $("body").append("<div id='mask'></div>");
		            $("#mask").addClass("mask").fadeIn("slow");
		            $("#RegisterBox").fadeIn("slow");
		        });
		        //
		        //按钮的透明度
		        $("#loginbtn").hover(function () {
		            $(this).stop().animate({
		                opacity: '1'
		            }, 600);
		        }, function () {
		            $(this).stop().animate({
		                opacity: '0.8'
		            }, 1000);
		        });
		        //文本框不允许为空---按钮触发
		        $("#loginbtn").on('click', function () {
		            var txtName = $("#txtName").val();
		            var txtName = $("#txtName1").val();
		            var txtEmail = $("#txtEmail").val();
		            var txtPwd = $("#txtPwd").val();
		            var txtPwd = $("#txtPwd1").val();
		            var txtPwd = $("#txtPwd2").val(); 
		            if (txtName == "" || txtName == undefined || txtName == null) {
		                if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
		                    $(".warning").css({ display: 'block' });
		                }
		                else {
		                    $("#warn").css({ display: 'block' });
		                    $("#warn2").css({ display: 'none' });
		                }
		            }
		            else {
		                if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
		                    $("#warn").css({ display: 'none' });
		                    $(".warn2").css({ display: 'block' });
		                }
		                else {
		                    $(".warning").css({ display: 'none' });
		                }
		            }
		            
		        });
		        //文本框不允许为空---单个文本触发
		        $("#txtName").on('blur', function () {
		            var txtName = $("#txtName").val();
		            if (txtName == "" || txtName == undefined || txtName == null) {
		                $("#warn").css({ display: 'block' });
		            }
		            else {
		                $("#warn").css({ display: 'none' });
		            }
		        });
		        $("#txtName").on('focus', function () {
		            $("#warn").css({ display: 'none' });
		        });
		        //
		        $("#txtPwd").on('blur', function () {
		            var txtName = $("#txtPwd").val();
		            if (txtName == "" || txtName == undefined || txtName == null) {
		                $("#warn2").css({ display: 'block' });
		            }
		            else {
		                $("#warn2").css({ display: 'none' });
		            }
		        });
		        $("#txtPwd").on('focus', function () {
		            $("#warn2").css({ display: 'none' });
		        });
		        //关闭
		        $(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
		            $("#LoginBox").fadeOut("fast");
		            $("#RegisterBox").fadeOut("fast");
		            $("#mask").css({ display: 'none' });
		        });
		    });
    	</script>   
    <script type="text/javascript">
			//表单提交采用json提交
			var login=function(){
		          var obj={
						"uAccount":$("#txtName").val(),
						"uPassword":$("#txtPwd").val()
					};
					$.post("../login/log.json",obj,function(json){
						if(json == 1){
					        location.href='../index/index.html';
						}else{
							alert("登录失败！");
						}
					});
			};
			
			var check=function(){
				var pass1 = $(".password").val();
				var pass2 = $(".password1").val();
				if(pass1==pass2){
		         	var obj={
						"uAccount":$(".account").val(),
						"uEmail":$(".email").val(),
						"uPassword":$(".password").val()
					};
					$.post("../login/check.json",obj,function(json){
						if(json == 1){
							alert("注册成功！");
							location.reload();
						}else if(json == 2){
							alert("注册邮箱已存在！");
						}else if(json == 3){
							alert("注册账号已存在！");
						}else{
							alert("注册失败！");
						}
					});
				}else{
					alert("两次密码输入不相同！");
				}
			};
			//表单提交结束
			var comeon = function(){
		        location.href='../index/index.html';
			};
			function BindEnter(obj)
			{
			    var button = document.getElementById('loginbtn1');
			    if(obj.keyCode == 13)
			        {
			            button.click();
			            obj.returnValue = false;
			        }
			}
		</script>
    
        <!-- Javascript -->
        <script src="<%=path%>/page/front/login/assets/js/jquery-1.8.2.min.js"></script>
        <script src="<%=path%>/page/front/login/assets/js/supersized.3.2.7.min.js"></script>
        <script src="<%=path%>/page/front/login/assets/js/supersized-init.js"></script>
        <script src="<%=path%>/page/front/login/assets/js/scripts.js"></script>
        <script src="<%=path%>/page/front/login/js/classie.js"></script>
        <script src="<%=path%>/page/front/login/js/sidebarEffects.js"></script>
    </body>
    <script type="text/javascript">
    jQuery(function($){

        $.supersized({

            // Functionality
            slide_interval     : 4000,    // Length between transitions
            transition         : 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed   : 1000,    // Speed of transition
            performance        : 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

            // Size & Position
            min_width          : 0,    // Min width allowed (in pixels)
            min_height         : 0,    // Min height allowed (in pixels)
            vertical_center    : 1,    // Vertically center background
            horizontal_center  : 1,    // Horizontally center background
            fit_always         : 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
            fit_portrait       : 1,    // Portrait images will not exceed browser height
            fit_landscape      : 0,    // Landscape images will not exceed browser width

            // Components
            slide_links        : 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides             : [    // Slideshow Images
                                     {image : '<%=path%>/page/front/login/assets/img/backgrounds/1.jpg'},
                                     {image : '<%=path%>/page/front/login/assets/img/backgrounds/2.jpg'},
                                     {image : '<%=path%>/page/front/login/assets/img/backgrounds/3.jpg'}
                           ]

        });

    });
    </script>

</html>

